﻿<DemoPageSectionComponent Id="Editors-MaskedInput-Overview" ShowSizeMode="true">
    <ChildContentWithParameters Context="Params">
        <div class="d-flex flex-column cw-320">
            <label for="textMaskID" class="demo-text mb-1">
                Text Mask
            </label>
            <DxMaskedInput @bind-Value="@Telephone"
                           SizeMode="Params.SizeMode"
                           CssClass="cw-320"
                           InputId="textMaskID"
                           Mask="(999)000-0000" />

            <label for="numericMaskID" class="demo-text mt-4 mb-1 ">
                Numeric Mask
            </label>
            <DxMaskedInput @bind-Value="@Price"
                           SizeMode="Params.SizeMode"
                           CssClass="cw-320"
                           InputId="numericMaskID"
                           Mask="@NumericMask.Currency" />
            <label for="regularExpressionMaskID" class="demo-text mt-4 mb-1">
                Regular Expression Mask
            </label>
            <DxMaskedInput @bind-Value="@Email"
                           SizeMode="Params.SizeMode"
                           CssClass="cw-320"
                           Mask="@EmailMask"
                           InputId="regularExpressionMaskID"
                           MaskMode="MaskMode.RegEx" />
            <label for="dateTimeMaskID" class="demo-text cw-320 mt-4 mb-1">
                Date-Time Mask
            </label>
            <DxMaskedInput @bind-Value="@Date"
                           SizeMode="Params.SizeMode"
                           CssClass="cw-320"
                           InputId="dateTimeMaskID"
                           Mask="@DateTimeMask.ShortDate" />
            <label for="dateTimeOffsetMaskID" class="demo-text mt-4 mb-1">
                Date-Time Offset Mask
            </label>
            <DxMaskedInput @bind-Value="@DateOffset"
                           SizeMode="Params.SizeMode"
                           CssClass="cw-320"
                           InputId="dateTimeOffsetMaskID"
                           Mask="hh:mm:ss tt zzzz" />
            <label for="timeSpanMaskID" class="demo-text mt-4 mb-1">
                Time Span Mask
            </label>
            <DxMaskedInput @bind-Value="@TimeSpan"
                           SizeMode="Params.SizeMode"
                           CssClass="cw-320"
                           InputId="timeSpanMaskID"
                           Mask="@TimeSpanMask.GeneralLongFormat" />
        </div>
    </ChildContentWithParameters>

    @code {
        double Price { get; set; } = 1.11;
        DateTime Date { get; set; } = DateTime.Today;
        TimeSpan TimeSpan { get; set; } = DateTime.Now.TimeOfDay;
        DateTimeOffset DateOffset { get; set; } = DateTimeOffset.Now;
        string EmailMask { get; set; } = @"(\w|[.-])+@(\w|-)+\.(\w|-){2,4}";
        string Email { get; set; } = "leahs@dx-email.com";
        string Telephone { get; set; } = "5625595830";
    }
</DemoPageSectionComponent>
